<template>
  <div id="namelessChange">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="内容样式" name="1">
        <ul class="content-list">
          <li>
            <span>页面设置：</span>
            <div>
              <el-radio v-model="styles.modulePage" label="1">模式一</el-radio>
              <el-radio v-model="styles.modulePage" label="2">模式二</el-radio>

              <ul v-if="styles.modulePage==1" class="content-list" style="margin-top:30px">
                <li>
                  <span style="width:70px">文字颜色：</span>
                  <div>
                    <colorSetting v-model="styles.colorWord" :originColor="styles.colorWord" initColor="#333333"></colorSetting>
                  </div>
                </li>
                <li>
                  <span style="width:70px">导航背景：</span>
                  <div>
                    <colorSetting v-model="styles.colorBg" :originColor="styles.colorBg" initColor="#fff"></colorSetting>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <span>背景设置：</span>
            <div>
              <el-radio v-model="styles.moduleTitle" label="1">模式一</el-radio>
              <el-radio v-model="styles.moduleTitle" label="2">模式二</el-radio>
              <div v-if="styles.moduleTitle==1" class="change-color" style="margin-top:20px">
                <colorSetting v-model="styles.colorIcon" :originColor="styles.colorIcon" initColor="#F5F5F5"></colorSetting>
              </div>
              <div v-else style="margin-top:20px">
                <upLoadImage :v="styles" :height="80"></upLoadImage>
              </div>
              <p
                v-if="styles.moduleTitle==1"
                style="color:#c5c8ce;font-size:12px;margin-top:10px"
              >设置页面背景颜色</p>
              <p v-else style="color:#c5c8ce;font-size:12px;margin-top:10px">上传页面背景图</p>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="内容样式" name="2">
        <ul class="content-list">
          <li>
            <span>列表标题：</span>
            <div>
              <el-input size="small" style="width: 380px" v-model="styles.title" placeholder="请输入内容"></el-input>
            </div>
          </li>
          <li>
            <span>导航标题：</span>
            <div>
              <el-input size="small" style="width: 380px" v-model="styles.navTitle" placeholder="请输入内容"></el-input>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>


<script>
import { mapState, mapMutations } from "vuex";
import upLoadImage from "../../comm/upLoadImage";
import colorSetting from "../../comm/colorSetting";
export default {
  name: "namelessChange",
  data() {
    return {
      activeNames: "1",
      activeNames2: "2",
      formCustom: {
        passwd: "",
        passwdCheck: "",
        age: "",
      },
    };
  },
  watch: {},
  computed: {
    ...mapState(["pageSetting"]),
    styles() {
      return this.pageSetting[0].styles;
    },
  },
  components: {
    upLoadImage,
    colorSetting
  },
  created() {
    console.log(this.styles);
  },
  methods: {},
};
</script>

<style lang="less" scoped>
@import url("../../../assets/css/base.less");
</style>
